<template>
	<view class="tabbar-container">
		<!-- <block> -->
			<view class="tabbar-item" v-for="(item,index) in tabbarList"
				:class="[item.centerItem ? ' center-item' : '']" @click="changeItem(item)">
				
				<view class="item-top">
					<image :class="[item.centerItem ? ' imgk' : '']" v-if="currentItem!==item.id" :src="item.iconPath"></image>
					<image :class="[item.centerItem ? ' imgk' : '']" v-else :src="item.selectedIconPath"></image>
				</view>
				<view class="item-bottom" :class="[currentItem==item.id ? 'item-active' : '']">
					<text :class="[item.centerItem ? ' oppo' : '']">{{item.text}}</text>
				</view>
			</view>
		<!-- </block> -->
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from "vue"
	let props = defineProps({
		currentPage: {
			type: Number,
			default: 0
		}
	})
	let currentItem = ref(0)
	let tabbarList = ref([{
			id: 0,
			"pagePath": "/pages/navBer/home/home",
			"iconPath": "/static/icons/首页.png",
			"selectedIconPath": "/static/icons/首页1.png",
			text: "首页",
			centerItem: false
		},
		{
			id: 1,
			"pagePath": "/pages/navBer/service/service",
			"iconPath": "/static/icons/服务.png",
			"selectedIconPath": "/static/icons/服务1.png",
			text: "服务",
			centerItem: false
		},
		{
			id: 2,
			"pagePath": "/pages/navBer/open/open",
			"iconPath": "/static/icons/钥匙.png",
			"selectedIconPath": "/static/icons/钥匙1.png",
			text: "开门",
			centerItem: true
		},
		{
			id: 3,
			"pagePath": "/pages/navBer/news/news",
			"iconPath": "/static/icons/消息.png",
			"selectedIconPath": "/static/icons/消息1.png",
			text: "消息",
			centerItem: false
		},
		{
			id: 4,
			"pagePath": "/pages/navBer/my/my",
			"iconPath": "/static/icons/我的.png",
			"selectedIconPath": "/static/icons/我的1.png",
			text: "我的",
			centerItem: false
		}
	])
		
	onMounted(()=>{
		currentItem.value = props.currentPage;
		uni.hideTabBar();
	})
		
	let changeItem = (item)=>{
		console.log(item.pagePath);
		uni.switchTab({
			url: item.pagePath
		});
	}
</script>
<style lang="less" scoped>
	view {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}
	.tabbar-container {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 110rpx;
		box-shadow: 0 0 5px #999;
		display: flex;
		align-items: center;
		padding: 5rpx 0;
		color: #999999;
		background-color: #fff;
		z-index: 666;
	}
	.tabbar-container .tabbar-item {
		width: 20%;
		// height: 100rpx;	
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
	}
	.tabbar-container .item-active {
		color: #076af8;
	}
	.tabbar-container .center-item {
		display: block;
		position: relative;
		image{
			width: 30rpx;
		}
	}
	.tabbar-container .tabbar-item .item-top {
		width: 70rpx;
		height: 70rpx;
		padding: 10rpx;
	}
	.tabbar-container .center-item .item-top {
		flex-shrink: 0;
		width: 120rpx;
		height: 120rpx;
		position: absolute;
		top:-100rpx;
		left: calc(50% - 60rpx);
		border-radius: 50%;
		box-shadow: 0 0 20px #999;
		background-color: #ffffff;
	}
	.tabbar-container .tabbar-item .item-top image {
		width: 100%;
		height: 100%;
	}
	.tabbar-container .tabbar-item .item-bottom {
		margin-top: -10rpx;
		font-size: 28rpx;
		width: 100%;
	}
	.tabbar-container .center-item .item-bottom {
		position: absolute;
		margin-top: -14px;
		margin-right: 5rpx;
	}
	.oppo{
		
	}
	.tabbar-container .center-item .item-top{
		image{
			width: 60rpx !important;
			height: 60rpx !important;
			// margin-top: 20rpx;
		}
	}
</style>